<template>
  <div class="home-box" v-if="store.isleftright">
    <Header
      v-if="store.isHeader"
      @data-sent="receiveDataFromChild"
      :style="{ backgroundColor: activeColor }"
    >
    </Header>
    <div class="home-content">
      <div class="home-nav">
        <Navigation />
      </div>
      <div class="home-router">
        <div class="home-router-view-box">
          <el-scrollbar
            class="home-scrollbar"
            wrap-style="display: flex;flex-direction: column; flex: 1"
            view-style="display: flex;flex-direction: column; flex: 1"
          >
            <div class="home-router-view">
              <router-view v-slot="{ Component }">
                <keep-alive :include="['product']">  
                  <component :is="Component" />
                </keep-alive>
              </router-view>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
    <!-- 假如有全局的告警弹窗，组件请写在这里 -->
    <!-- <AlarmWindow></AlarmWindow> -->
  </div>
  <div class="home-boxs" v-else>
    <div class="home-content">
      <div class="home-nav">
        <div class="home-menu">
          <Navigation />
        </div>
      </div>
      <div class="home-minbox">
        <div class="home-head">
          <Header v-if="store.isHeader"></Header>
        </div>
        <div class="home-main">
          <el-scrollbar
            class="home-scrollbar"
            wrap-style="display: flex;flex-direction: column; flex: 1"
            view-style="display: flex;flex-direction: column; flex: 1"
          >
            <div class="home-router-view">
              <router-view v-slot="{ Component }">
                <keep-alive :include="['product']">  
                  <component :is="Component" />
                </keep-alive>
              </router-view>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import useStore from "@/store/store.js";
import { ref } from "vue";
const dataFromChild = ref(null);
const activeColor = ref("white");
const subjectColor = getComputedStyle(
  document.documentElement
).getPropertyValue("--subject-color"); //获取全局默认主题色 蓝色
function receiveDataFromChild(data) {
  dataFromChild.value = data;
  if (dataFromChild.value == "color-blue") {
    activeColor.value = subjectColor;
    document.documentElement.style.setProperty(
      "--subject-whitecolor",
      activeColor.value
    ); //修改白色主题色为蓝色

    sessionStorage.setItem("color", "blue");
  } else {
    document.documentElement.style.setProperty(
      "--subject-whitecolor",
      "#ffffff"
    );
    activeColor.value = "white";
  }
}
const store = useStore();
</script>

<style lang="scss">
:root {
  --subject-whitecolor: #ffffff; /* 主题白色 默认色 */
}
</style>

<style lang="scss" scoped>
.home-scrollbar {
  background-color: var(--subject-whitecolor) !important;
  width: 100%;
  flex: 1;
  .is-horizontal {
    display: none;
  }
}
.home-router-view {
  width: 100%;
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--background-color);
}

// 默认布局
.home-box {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .home-content {
    display: flex;
    flex: 1;
    overflow: hidden;
    box-sizing: border-box;

    .home-nav {
      height: 100%;
      box-sizing: border-box;
    }
    .home-minbox {
      display: flex;
      width: 100%;
      height: 100vh;
      flex-direction: column;
    }
    .home-head {
      .header-box {
        width: 100%;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #ffffff;
        box-sizing: border-box;
        padding: 12px 24px;
        overflow: hidden;
        border-bottom: 1px solid var(--border-color);

        .header-left {
          display: flex;
          align-items: center;
          height: 100%;
        }

        .header-right {
          display: flex;
          align-items: center;
        }

        .header-title {
          margin: 0 36px 0 12px;
          // color: var(--header-font-color);
          font-size: 22px;
          font-weight: 600;
          line-height: 32px;
        }

        .header-avatar {
          width: 32px;
          height: 32px;
          cursor: pointer;
          border-radius: 50%;
          overflow: hidden;
        }

        .header-user-name {
          // color: rgba(0, 0, 0, 0.9);
          font-size: 14px;
          line-height: 22px;
          margin-left: 12px;
        }
      }
      //border :1px solid black
    }

    .home-router {
      flex: 1;
      min-width: 0;
      height: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;

      .home-router-view-box {
        width: 100%;
        flex: 1;
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        // border: 1px solid #aa55ff;
      }

      .home-router-view {
        width: 100%;
        flex: 1;
        min-height: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        position: relative;
        background-color: var(--background-color);
        // border: 1px solid red;
      }
    }
  }
}
// 侧边栏布局
.home-boxs {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .home-content {
    display: flex;
    flex: 1;
    overflow: hidden;
    box-sizing: border-box;

    .home-nav {
      // border: 1px solid blue;
      height: 100%;
      box-sizing: border-box;
      .home-menu {
        width: 263px;
        height: 100%;
        // border: 1px solid red;
      }
    }

    .home-minbox {
      display: flex;
      width: 100%;
      height: 100vh;
      flex-direction: column;
    }
    .home-head {
      .header-box {
        width: 100%;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #ffffff;
        box-sizing: border-box;
        padding: 12px 24px;
        overflow: hidden;
        border-bottom: 1px solid var(--border-color);

        .header-left {
          display: flex;
          align-items: center;
          height: 100%;
        }

        .header-right {
          display: flex;
          align-items: center;
        }

        .header-title {
          margin: 0 36px 0 12px;
          // color: var(--header-font-color);
          font-size: 22px;
          font-weight: 600;
          line-height: 32px;
        }

        .header-avatar {
          width: 32px;
          height: 32px;
          cursor: pointer;
          border-radius: 50%;
          overflow: hidden;
        }

        .header-user-name {
          // color: rgba(0, 0, 0, 0.9);
          font-size: 14px;
          line-height: 22px;
          margin-left: 12px;
        }
      }
      //border :1px solid black
    }
    .home-main {
      flex: 1;
      // border: 1px solid red;
      min-width: 0;
      height: 100%;
      box-sizing: border-box;
    }

    .home-router {
      flex: 1;
      min-width: 0;
      height: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;

      .home-router-view-box {
        width: 100%;
        flex: 1;
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        //  border: 1px solid #aa55ff;
      }

      .home-router-view {
        border: 1px solid red;
        width: 100%;
        flex: 1;
        min-height: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        position: relative;
        background-color: var(--background-color);
      }
    }
  }
}
</style>
